<!DOCTYPE html>
<html lang="en">
<head>
    <title>房源情况统计</title>
    <meta charset="utf-8">
    <link href="/plugins/echarts/common.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <link rel="stylesheet" href="/style/jmdf.css" media="all">
<#setting number_format="#.##">
</head>
<body>
<!--顶部-->
<header class="header left">
    <div class="left nav">
        <ul>
            <li>&nbsp;</li>
        </ul>
    </div>
    <div class="header_center left" style="position:relative;font-weight: bold;font-size: 36px;">
        房源情况统计
    </div>
    <div style="text-align: center">
        <span class="header_center" id="now" style="font-size: 26px;"></span><br/>
        <span class="header_center" id="nowHour" style="font-size: 26px;"></span>
    </div>
</header>
<div class="con left">
    <div class="div_any">
        <div class="left div_any01" style="width:49%;">
            <div class="div_any_child" style="width:98%;height: 900px;">
                <div class="div_any_title" style="font-size: 25px;">整体房源情况(套)</div>
                <div id="chooseHousePie" style="height: 900px;"></div>
                <div style="width: 50%;height: 20%;display: inline-block;color:red;position: absolute;left: 1%;top: 8%;">
                    <div style="display: inline-block;width:45%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">房源总套数</div>
                        <div style="color:#87cefa;font-size: 30px;line-height: 42px;" id="allHouseCount">0</div>
                    </div>
                    <div style="display: inline-block;width:45%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">房源剩余套数</div>
                        <div style="color:red;font-size: 30px;line-height: 42px;" id="noAllHouseCount">0</div>
                    </div>
                </div>
                <div style="width: 50%;height: 20%;display: inline-block;color:red;position: absolute;right: 1%;top: 8%;">
                    <div style="display: inline-block;width:45%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">今日选房套数</div>
                        <div style="color:#87cefa;font-size: 30px;line-height: 42px;" id="chooseHouseCountDay">0</div>
                    </div>
                    <div style="display: inline-block;width:45%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">累计选房套数</div>
                        <div style="color:red;font-size: 30px;line-height: 42px;" id="chooseHouseCountAll">0</div>
                    </div>
                </div>
                <div style="width: 50%;height: 20%;display: inline-block;color:red;position: absolute;left: 1%;bottom: -10%;">
                    <div style="display: inline-block;width:45%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">复式、五房总套数</div>
                        <div style="color:#87cefa;font-size: 30px;line-height: 42px;" id="bigHouseTotalCount">0</div>
                    </div>
                    <div style="display: inline-block;width:45%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">复式、五房剩余套数</div>
                        <div style="color:red;font-size: 30px;line-height: 42px;" id="total_big_noChoose">0</div>
                    </div>
                </div>
                <div style="width: 50%;height: 20%;display: inline-block;color:red;position: absolute;right: 1%;bottom: -10%;">
                    <div style="display: inline-block;width:45%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">二、三、四房总套数</div>
                        <div style="color:#87cefa;font-size: 30px;line-height: 42px;" id="noBigHouseTotalCount">0</div>
                    </div>
                    <div style="display: inline-block;width:45%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">二、三、四房剩余套数</div>
                        <div style="color:red;font-size: 30px;line-height: 42px;" id="total_noBig_noChoose">0</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="left div_any01" style="width:49%;">
            <div class="div_any_child" style="width:98%;height: 900px;">
                <div class="div_any_title" style="font-size: 25px;">湖滨花园(西区)房源情况(套)</div>
                <div id="buildChart1" style="height: 900px;"></div>
            </div>
        </div>
    </div>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/plugins/jquery/jquery.min.js"></script>
<script src="/plugins/echarts/echarts.min.js"></script>
<script>
    layui.config({
        base: '/modules/' //静态资源所在路径
    }).use(['jquery'], function () {
        var $ = layui.jquery;


        var buildChart1 = null;
        var buildChart2 = null;
        var buildChart3 = null;
        var chooseHousePie = null;
        var build_json_choose = [];//已选
        var build_json_noChoose = [];//未选
        var chooseText = "已选";
        var noChooseText = "未选";
        var buildColor = ["#87cefa", "#F57474"];

        function initGroup() {
            //饼图
            chooseHousePie = echarts.init(document.getElementById('chooseHousePie'));
            var optionPie = {
                color: [buildColor[0], buildColor[1]],
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}({c})<br/>{d}%"
                },
                series: [
                    {
                        type: 'pie',
                        center: ['50%', '50%'],
                        radius: [150, 250],
                        x: '0%', // for funnel
                        itemStyle: {
                            normal: {
                                label: {
                                    position: 'center',
                                    fontSize: '35',
                                    formatter: function (params) {
                                        if (params.name == chooseText) {
                                            return chooseText + ":" + (params.percent + '%')
                                        } else {
                                            return noChooseText + ":" + (params.percent + '%')
                                        }
                                    }
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        data: [
                            {name: chooseText, value: 0},
                            {name: noChooseText, value: 0}
                        ]
                    }
                ]
            };
            chooseHousePie.setOption(optionPie);
            //柱状图1 湖滨花园西区
            buildChart1 = echarts.init(document.getElementById('buildChart1'));
            var optionChart1 = {
                color: [buildColor[0], buildColor[1]],
                grid: { //方位设置
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                legend: { //说明设置
                    data: [
                        {name: chooseText, textStyle: {color: buildColor[0]}}
                        , {name: noChooseText, textStyle: {color: buildColor[1]}}
                    ],
                    top: '5%',
                    left: '30px'
                },
                tooltip: {
                    trigger: 'item'
//                    ,formatter: "{a}<br/>{b}<br/>{c}人"
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisLine: {
                            lineStyle: {
                                color: '#5bc0de'
                            }
                        },
                        axisLabel: {//柱状图下文字设置
                            interval: 0,
                            rotate: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize: "12"
                            },
                            formatter: '{value}'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#5bc0de'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff'
                            },
                            formatter: function (value) {
                                return value + "";
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: chooseText,
                        type: 'bar',
                        barWidth: 30,
                        stack: '总量',
                        zlevel: 1,
                        label: {
                            show: true,
                            position: 'inside',
                            fontSize: '20',
                            color: '#ffffff',
                            formatter: function (data) {
                                var i = data.dataIndex;//坐标
                                var v = data.value;//数值
                                if (v == 0) {
                                    return "";
                                }
                                return build_json_choose[i];
                            }
                        },
                        data: build_json_choose
                    },
                    {
                        name: noChooseText,
                        type: 'bar',
                        barWidth: 30,
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                fontSize: '20',
                                color: '#ffffff',
                                formatter: function (data) {
                                    var i = data.dataIndex;//坐标
                                    //var v = data.value;//数值
                                    var total = build_json_choose[i] + build_json_noChoose[i];
                                    if (total > 0) {
                                        return total;
                                    } else {
                                        return "";
                                    }
                                }
                            }
                        },

                        data: build_json_noChoose
                    }
                ]
            };
            buildChart1.setOption(optionChart1);
        }

        //饼图
        function getBuildData4() {
            var objPie = chooseHousePie.getOption();
            $.ajax({
                url: "/show/getBuildChooseHouseInfo?zsProjectIdStr=146&azProjectIdStr=4,19,20,21",
                type: "get",
                dataType: "json",
                success: function (data) {
                    //饼图
                    objPie.series[0].data[0].value = data.pie[0];
                    objPie.series[0].data[1].value = data.pie[1];
                    chooseHousePie.setOption(objPie);
                    //提示文字
                    $("#allHouseCount").html(data.chooseHouseInfo[0]);
                    $("#noAllHouseCount").html(data.chooseHouseInfo[1]);
                    $("#chooseHouseCountDay").html(data.chooseHouseInfo[2]);
                    $("#chooseHouseCountAll").html(data.chooseHouseInfo[3]);
                    $("#smallAllHouseCount").html(data.chooseHouseInfo[4]);
                    $("#noSmallAllHouseCount").html(data.chooseHouseInfo[5]);
                    $("#normalHouseTotalCount").html(data.chooseHouseInfo[6]);
                    $("#noNormalHouseTotalCount").html(data.chooseHouseInfo[7]);
                    $("#fsHouseTotalCount").html(data.chooseHouseInfo[8]);
                    $("#noFsHouseTotalCount").html(data.chooseHouseInfo[9]);

                    $("#bigHouseTotalCount").html(data.chooseHouseInfo[10]);
                    $("#total_big_noChoose").html(data.chooseHouseInfo[11]);
                    $("#noBigHouseTotalCount").html(data.chooseHouseInfo[12]);
                    $("#total_noBig_noChoose").html(data.chooseHouseInfo[13]);

                }
            });
        }

        //西区柱状图
        function getBuildData1() {
            var objChart = buildChart1.getOption();
            $.ajax({
                url: "/show/getBuildChooseHouseInfForBs?zsProjectIdStr=146&azProjectIdStr=19",
                type: "get",
                dataType: "json",
                success: function (data) {
                    //签约柱状图
                    objChart.xAxis[0].data = data.build;
                    build_json_choose = data.chooseCount;
                    build_json_noChoose = data.noChooseCount;
                    objChart.series[0].data = build_json_choose;
                    objChart.series[1].data = build_json_noChoose;
                    buildChart1.setOption(objChart);
                }
            });
        }


        $(function () {
            initGroup();
            getBuildData1();
            getBuildData4();
            setInterval(getBuildData1, 30000);
            setInterval(getBuildData4, 30000);
        });
    });
</script>
</body>
</html>
